<#include "/common/framework.html">
<@header>
</@header>
<@body>
<div class="content-container" id="content">
    <!-- ui buttons -->
    <div class="page page-ui-tables">

        <ol class="breadcrumb breadcrumb-small">
            <li>系统管理</li>
            <li class="active"><a href="#">角色管理</a></li>
        </ol>

        <div class="page-wrap">
            <div class="row">

                <!-- Data Table -->
                <div class="col-md-12">
                    <div class="panel panel-lined table-responsive panel-hovered mb20 data-table">
                        <div class="panel-heading">Data Table</div>
                        <div class="panel-body">
                            <div class="small text-bold left mt5">
                                Show&nbsp;
                                <select class="lengthSelect">
                                    <option value="5">5</option>
                                    <option value="10" selected>10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                </select>
                                &nbsp;entries
                            </div>

                            <form class="form-horizontal right col-lg-4" action="javascript:;">
                                <input type="text" class="form-control input-sm searchInput" placeholder="Type keyword">
                            </form>
                        </div>
                        <!-- data table -->
                        <table id="example" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th><input type="checkbox" id="checkAll"></th>
                                <th>
                                    序号
                                </th>
                                <th>
                                    名称
                                </th>
                                <th>
                                    描述
                                </th>
                                <th align="center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- data initialize via script, can also be load via ajax -->
                            </tbody>
                        </table>
                        <!-- #end data table -->

            </div>
        </div>
        <!-- #end page-wrap -->
    </div>
    <!-- #end ui buttons -->
</div>
</@body>
<@js>
    <script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script>
        $(function () {
            var table = $('#example').dataTable( {
                //"data": data,           //javascript数据源配置
                "processing": true,      //载入数据的时候是否显示“载入中”
                "serverSide": true,      //开启服务器模式 //分页，取数据等等的都放到服务端去
                "pageLength": 10,         //首次加载的数据条数
                "ordering": false,       //禁用排序 //排序操作在服务端进行，所以可以关了。
                "searching": false,      //禁用搜索
                "stateSave": true,//保持翻页状态，和comTable.fnDraw(false);结合使用
                "aLengthMenu":[1,5,10,20,50,100,200],
                "pagingType": "full_numbers",   //除首页、上一页、下一页、末页四个按钮还有页数按钮
                "scrollY": 400,           //垂直滚动条
                lengthChange: false,
                "ajax": {
                    "type": 'POST',                          //请求方式
                    "url": '/admin/role/getRoleList',    //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
                    "dataSrc": "data"                      //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
                },
                columns: [
                    {
                        data: null,
                        render: function (data, type, row) {
                            return "<input type='checkbox' value='"+data.id+"' class='checkitem' name='checkitem' />";
                        }
                    },
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'description' },
                    {"data": null}
                ],
                //操作按钮
                columnDefs: [
                    /*{
		                    targets: 0,
		                    defaultContent: "<input type='checkbox' name='checkList'>"
		              },*/
                    {
                        targets: -1,
                        defaultContent: '<button type="button" class="btn btn-xs btn-info waves-effect">Info</button>' +
                        '&nbsp;&nbsp;&nbsp;' +
                        '<button type="button" class="btn btn-xs btn-info waves-effect">Info</button>'
                    }
                ],
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                }
            });
        });
    </script>
</@js>